<template>
  <div>
    <!-- 在浏览器上获取点，水平坐标和垂直坐标
    event event的数据类型 MouseEvent
    pageX
    pageY
    
     -->
    <h1>x的坐标{{ x }}</h1>
    <h1>y的坐标{{ y }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import useGetMousePosition from "./hooks/useGetMousePosition";

export default defineComponent({
  setup() {
    // 自定义hook
    // hook的作用就是将具有特定功能的一段代码封装起来，什么时候用，什么时候调用  模块的复用功能

    // 获取xy
    // 能获取xy的值 xy的值分别都是ref对象
    console.log(useGetMousePosition());
    const { x, y } = useGetMousePosition();
    return {
      x,
      y,
    };
  },
});
</script>

<style scoped>
</style>